import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, message } from 'antd';
import { Link } from 'react-router-dom';
import Styles from '../../assets/styles/login.module.less';
import { Ilogin } from '../../types/user';
import { loginApi } from '../../apis/loginApi';
import { useHistory } from 'umi';

export default function login() {
  const history = useHistory();

  const onFinish = async (values: Ilogin) => {
    console.log('123');

    let { username, password } = values;
    values.username = 'mrbird';
    // values.username = 'bobo';
    values.password = '1234qwer';
    const res: any = await loginApi(values);

    if (res.message == '认证成功') {
      // sessionStorage.setItem('username', username);
      sessionStorage.setItem('username', values.username);
      sessionStorage.setItem('token', res.data.token);
      message.info('登录成功', 0.8, () => {
        history.push('/home');
      });
    }
  };
  return (
    <div className={Styles.loginContainer}>
      <div className={Styles.loginContent}>
        <div className={Styles.loginContentTop}>
          <h3>阿杰养车</h3>
        </div>
        <div className={Styles.loginContentMain}>
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{ remember: true }}
            onFinish={onFinish}
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: false,
                  message: '用户名不能为空！',
                },
                {
                  pattern: /^[a-zA-Z0-9]{3,}$/,
                  message: '用户名不能低于3位',
                },
              ]}
            >
              <Input
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="请输入用户名"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  required: false,
                  message: '密码不能为空！',
                },
                {
                  pattern: /^[a-zA-Z0-9]{6,}$/,
                  message: '密码不能低于6位!',
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="请输入登录密码"
              />
            </Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              登录
            </Button>
            <div>
              <Link to="#">注册账户</Link>
              <Link to="/settled">商家入驻</Link>
            </div>
          </Form>
        </div>
      </div>
    </div>
  );
}
